<template>
  <div v-loading="loading" :class="{'mobile-detail-wrap':showMobilePage}" class="sign-detail-container">
    <div class="sign-detail-content">
      <Title title="基础信息" style="font-size:16px; margin-bottom:7px"/>
      <baseInfo ref="userInfo" :show-mobile-page="showMobilePage" :base-info="flyUserInfo.baseInfo"/>
      <Title title="个人资料" style="font-size:16px; margin:23px 0 7px"/>
      <userInfo ref="userInfo" :show-mobile-page="showMobilePage" :user-info="flyUserInfo.userInfo" @onConfirm="handleWxCodeStore"/>
      <Title title="收款账户" style="font-size:16px; margin:23px 0 10px"/>
      <paymentInfo
        v-if="flag"
        ref="paymentInfo"
        :account-list-data="flyUserInfo.accountsReceivable"
        :account-list="payAccount"
        module-name="飞来用户"
        style="margin-bottom: 24px"/>
      <Title title="账号信息" style="font-size:16px; margin:20px 0 8px">
        <InfoIcon placement="right" content="此处展示达人从小程序里填写提交的账号信息" style="margin-left: 4px" />
      </Title>
      <div v-if="showAccountInfo">
        <DetailTabs v-model="activeTab" :tabs="accountTabs" class="list-tab" @tabClick="handleTabClick"/>
        <accountInfo
          ref="accountInfo"
          :show-mobile-page="showMobilePage"
          :accounts-info="accountsInfoItem"/>
      </div>
      <div v-else class="empty-container">
        <img :src="emptyIcon" alt="">
        <div class="text">暂无账号信息</div>
      </div>
      <fixed-pagination>
        <div class="center">
          <MoreOpeator
            v-if="hasRouteAuth('crm:flyUser:setStatus') || hasRouteAuth('crm:flyUser:createSignUp')
            || hasRouteAuth('crm:flyUser:createSupplier') || hasRouteAuth('crm:flyUser:relateSupplier')"
            :icon="false"
            :list="[
              {label: '启用',handelClick: setTrue, auth: hasRouteAuth('crm:flyUser:setStatus')&& flyUserInfo.baseInfo.status !== 1},
              {label: '禁用', handelClick: setFalse, auth: hasRouteAuth('crm:flyUser:setStatus') && flyUserInfo.baseInfo.status !== 2},
              {label: '发起签约',handelClick: toSignUpCreate, auth: hasRouteAuth('crm:flyUser:createSignUp')},
              {label: '新建供应商',handelClick: toCreateSupplier, auth: hasRouteAuth('crm:flyUser:createSupplier')},
              {label: '关联供应商',handelClick: openSupplierDialog, auth: hasRouteAuth('crm:flyUser:relateSupplier')},
            ]"
            label="批量操作"
            class="moreOperator mobile-btn-flex"
          />
          <el-button class="back-btn cancel-btn-style" size="small" @click="toBack()">返回</el-button>
        </div>
      </fixed-pagination>
    </div>
    <supplierDialog ref="supplierDialog" @succese="getUserInfo"/>
  </div>
</template>
<script>
// 组件
import DetailTabs from '@/components/Common/baseComponent/DetailTabs';
import baseInfo from '../components/baseInfo';
import userInfo from '../components/userInfo';
import accountInfo from '../components/accountInfo';
import paymentInfo from '@/views/signUp/components/paymentInfo';
import Title from '@/components/Title';
import supplierDialog from '../components/supplierDialog';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
// api methods
import { flyUserDetail, storeReceiveWxCode } from '@/api/flyUser';
import { hasRouteAuth } from '@/utils/permission';
// img
import emptyIcon from '@/assets/home/emptyIcon.png';
// mixins
import mixins from '../mixins';
import { mapState } from 'vuex';

export default {
  components: {
    DetailTabs,
    baseInfo,
    accountInfo,
    paymentInfo,
    userInfo,
    Title,
    MoreOpeator,
    supplierDialog
  },
  mixins: [mixins],
  data() {
    return {
      hasRouteAuth,
      emptyIcon,
      flyUserId: '',
      flyUserInfo: {
        userInfo: {},
        baseInfo: {},
        accountsReceivable: []
      },
      activeTab: '',
      accountTabs: [], // 账户列表
      accountsInfoItem: {},
      loading: false,
      flag: true
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    showAccountInfo() { // 展示账号信息
      return this.accountTabs.length > 0;
    },
    payAccount() {
      const account = [
        {
          label: '收款户名',
          type: 'inputText',
          width: '160px',
          isRequired: true,
          keyword: 'payName'
        },
        {
          label: '收款账号',
          type: 'inputText',
          showType: 'secret',
          width: '160px',
          isRequired: true,
          keyword: 'payNum'
        },
        {
          label: '身份证号',
          type: 'inputText',
          showType: 'secret',
          width: '180px',
          isRequired: true,
          keyword: 'identityNumber'
        },
        {
          label: '联系电话',
          type: 'inputText',
          showType: 'secret',
          width: '130px',
          isRequired: true,
          keyword: 'tel'
        },
        {
          label: '银行',
          type: 'inputText',
          width: '160px',
          isRequired: false,
          keyword: 'bank'
        },
        {
          label: '省市',
          type: 'selectCity',
          isRequired: false,
          selectType: 'city',
          width: '160px',
          keyword: 'province'
        },
        {
          label: '支行',
          type: 'inputText',
          width: '160px',
          isRequired: false,
          keyword: 'subBank'
        }
      ];
      const item = {
        label: '云账户',
        type: 'select',
        width: '130px',
        isRequired: true,
        keyword: 'isBindCloud'
      };
      if (this.flyUserInfo.userInfo.supplierType === 0) {
        account.unshift(item);
      }
      return account;
    }
  },
  watch: {
    'flyUserInfo.userInfo.supplierType': {
      handler: function() {
        this.flag = false;
        this.$nextTick(() => {
          this.flag = true;
        });
      },
      deep: true
    }
  },
  created() {
    if (this.$route.query.flyUserId) {
      this.flyUserId = Number(this.$route.query.flyUserId);
      this.getUserInfo();
    }
  },
  methods: {
    getUserInfo() {
      this.loading = true;
      flyUserDetail(this.flyUserId).then(res => {
        this.loading = false;
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.accountTabs = [];
        res.data.accountsInfoList && res.data.accountsInfoList.forEach((el, index) => { // 获取账号tab
          this.accountTabs.push({
            name: el.accountName,
            id: index
          });
        });
        res.data.accountsReceivable && res.data.accountsReceivable.forEach(el => {
          if (el.province) {
            el.province = el.province.replace(/,/g, '-');
          }
        });
        this.flyUserInfo = res.data;
        this.accountsInfoItem = res.data.accountsInfoList[0];
        if (this.accountTabs.length > 0) { this.activeTab = this.accountTabs[0].id; }
      }).catch(err => {
        this.loading = false;
        console.log(err);
      });
    },
    // 启用禁用
    setTrue() {
      this.setUserStatus(this.flyUserId, 1, this.flyUserInfo.baseInfo.supplier, true);
    },
    setFalse() {
      this.setUserStatus(this.flyUserId, 2, this.flyUserInfo.baseInfo.supplier, true);
    },
    toSignUpCreate() {
      this.signUpCreate(this.flyUserId);
    },
    openSupplierDialog() {
      this.openDialog(this.flyUserId, this.flyUserInfo.baseInfo.supplier);
    },
    handleTabClick(index) {
      this.accountsInfoItem = this.flyUserInfo.accountsInfoList[index];
    },
    // 接收微信号编辑
    handleWxCodeStore(code) {
      const params = {};
      params.id = this.flyUserId;
      params.receiveWxCode = code;
      storeReceiveWxCode(params).then(res => {
        if (res.code === 200) {
          this.$message.success('保存成功');
          this.getUserInfo();
        }
      }).catch(error => {
        console.log(error);
      });
    },
    toBack() {
      this.$router.push({
        name: 'flyUser'
      });
    },
    // 新增供应商
    toCreateSupplier() {
      const routeUrl = this.$router.resolve({
        name: 'supplierManage',
        query: {
          toCreate: 1
        }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
.sign-detail-container{
  margin:	16px;
  background: #fff;
  min-height: calc(100vh - 64px);
  & ::v-deep {
    .el-table__empty-text {
      width: 100%;
    }
  }
  .sign-detail-content{
    padding: 16px 24px 56px;
  }
  &.mobile-detail-wrap {
    margin: 0;
    .sign-detail-content {
      padding: 16px 12px 56px 12px;
    }
  }
  .list-tab{
    margin-bottom: 16px;
    margin-top: 10px;
  }
  .moreOperator{
    margin-right: 16px;
  }
  .moreOperator:hover{
    ::v-deep {
      .el-button{
        color: #406EFF;
        border-color: #406EFF;
      }
    }
  }
  .empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    .text {
      font-size: 14px;
      font-weight: 400;
      text-align: left;
      color: #999999;
      line-height: 20px;
      margin-top: 10px;
    }
    .blue {
      color: #406ef4;
    }
    img {
      width: 120px;
    }
  }
}
</style>
